/*颜色*/
@main: #f15d52;
@g3d: #ddd;
@g3: #333;
@g6: #666;
@g9: #999;
@fff: #fff;
@btn: #ffad39;

@f10: 10px;
@f12: 12px;
@f14: 14px;
@f16: 16px;

@border: 1px solid #ddd;
@shadow: 1px 1px 2px #ddd;

/*点餐*/
.shopping-cart{
	margin-top: 10px;
	box-shadow: @shadow;
	ul{
		li{
			border-bottom: @border;
			padding: 8px;
			background: #fff;
		}
		li:last-child{
			border-bottom: none;
		}
		.p-name{

		}
		.price{
			margin-right: 20px;
			width: 70px;
			text-align: right;
		}
		.calc{
			span>i{
				cursor: pointer;
				width: 22px;
				height: 22px;
				display: inline-block;
				vertical-align: middle;
				margin: 0;
			}
			.reduce{
				background: url(../img/reduce_press.png) no-repeat;
				background-size: 22px;
				margin-right: 4px;
			}
			.plus{
				background: url(../img/plus_press.png) no-repeat;
				background-size: 22px;
				margin-left: 4px;
			}
		}
	}
}
.sub-btn{
  line-height: 40px;
	input{
		margin-left: 12px;
		box-shadow: none;
		border-radius: 4px;
		background: -webkit-gradient(linear, left top, right bottom, from(#ffc64b), to(#ffae3a));
    	box-shadow: 0px 1px 3px 0px #f5cd92;
	}
	.yes{
		background: url(../img/yes.png) no-repeat;
		background-size: 22px 22px; 
	}
	.total{
		text-align: right;
		font-size: 10px;
		float: right;
		color: @main;
		b{
			color: @g3;
		}
	}
}
/*分享*/

.share_bg {
  background: url(../img/share_friends.png) no-repeat center;
  background-size: 196px;
  height: 20px;
}
.td_code {
  width: 132px;
  height: 132px;
  overflow: hidden;
  background: #ffffff;
  margin: 0 auto;
  border-radius: 66px;
  margin-top: 14px;
}
.td_code img {
  width: 74px;
  height: 74px;
  display: block;
  margin: 28px auto;
}
.share_footer {
  padding: 0 20px;
  margin-top: 20px;
}
.share_footer .code_pic img {
  display: inline-block;
  width: 114px;
}
.share_footer .code_num {
  background: url(../img/qr-bg.png) no-repeat;
  background-size: 100%;
  height: 50px;
  position: relative;
  margin-bottom: 20px;
}
.share_footer .code_num p {
  position: absolute;
  top: 24px;
  right: 12px;
  color: #fff;
}
.share_footer .code_num p span {
  font-size: 18px;
}
.share_footer .fr > p {
  color: #999;
}
/*点单详情 order-details*/
.main-title{
	padding: 12px 10px;
	cursor: pointer;
	line-height: 16px;
	font-size: 12px;
	border-radius: 0;
	background: #fff;
	margin-top: 54px;
	width: 100%;
	position: fixed;
	border-bottom: @border;
	z-index: 99;
	box-sizing: border-box;
	i{
		width: 10px;
		margin-left: 10px;
		height: 6px;
		display: inline-block;
		background: url(../img/triangle_arrow.png) no-repeat;
		background-size: 10px;
		vertical-align: middle;
	}
	select{
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		-o-appearance: none;
		outline: none;
		border: none;
		color: @g9;
		padding-right: 20px;
		background-image: url(../img/triangle_arrow.png);
		background-size: 14px;
		background-repeat: no-repeat;
		background-position: right center;
	}
}
.b-bg{
	width: 100%;
	height: 10px;
	background: #f7f7f7;
	position: fixed;
	z-index: 999;
	top: 45px;
}
/*@media screen and (max-height: 480px){

	.main nav{
		height: 300px;
		overflow: auto;
		margin-bottom: 40px;
	}

}*/
.main{
	background: #f7f7f7;
	box-shadow: none;
	nav{
		width: 24%;
		position: fixed;
		margin-top: 2px;
		background: #ffffff;
		border-right: 1px solid #dddddd;
		z-index: 99;
		height: ~"calc(100% - 136px)";
		height: ~"-moz-calc(100% - 136px)";
		height: ~"-webkit-calc(100% - 136px)";
		height: ~"-o-calc(100% - 136px)";
		overflow: auto;
		.act{
			background: rgba(255,255,255,0);
		}
		ul li{
			padding: 10px 16px;
			border-bottom: @border;
			text-align: center;
			cursor: pointer;
			position: relative;
			font-size: 10px;
			text-align: center;
			background: rgba(255,255,255,1);
			a{
				color: @g9;
				i{
					width: 36px;
					height: 36px;
					display: inline-block;
					vertical-align: middle;
					margin-bottom: 8px;
				}
			}
			.bar{
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: -1;
				width: 100%;
				height: 2px;
			}
		}
		li:nth-child(1){
			.bar{
				background: #6589ff;
			}
			i{
				background: url(../img/packages.png) no-repeat;
				background-size: 36px;
			}
		} 
		li:nth-child(2){
			.bar{
				background: #9b69f6;
			}
			i{
				background: url(../img/wine.png) no-repeat;
				background-size: 36px;
			}
		} 
		li:nth-child(3){
			.bar{
				background: #56d087;
			}
			i{
				background: url(../img/drink.png) no-repeat;
				background-size: 36px;
			}
		} 
		li:nth-child(4){
			.bar{
				background: #ff9639;
			}
			 i{
				background: url(../img/snacks.png) no-repeat;
				background-size: 36px;
			}
		}
		li:nth-child(5){
			.bar{
				background: #f15d52;
			}
			i{
				background: url(../img/staple_food.png) no-repeat;
				background-size: 36px;
			}
		}
		li:nth-child(6){
			.bar{
				background: #99e010;
			}
			i{
				background: url(../img/shuiguo_icon.png) no-repeat;
				background-size: 36px;
			}
		}
		li:nth-child(7){
			.bar{
				background: #dfe6e8;
			}
			i{
				background: url(../img/qita_icon.png) no-repeat;
				background-size: 36px;
			}
		}
	}
	aside{
		width: 75%;
		background: #f7f7f7;
		box-sizing: border-box;
		position: relative;
		padding-bottom: 30px;
		.aside-top{
			padding: 4px 0;
			border-top: @border;
			position: fixed;
			background: rgba(255,255,255,0.8);
			text-align: center;
			width: 75%;
			font-size: 12px;
			span{
				font-size: 10px;
				color: @g9;
			}
		}
		ul{
			padding: 23px 12px 0;
		}
		li{
			font-size: 12px;
			border-bottom: @border;
			padding: 14px 0;
			p:nth-child(2){
				color: @main;
				span{
					color: @g9;
					font-size: 12px;
				}
			}
			div{
				i{
					cursor: pointer;
					width: 22px;
					height: 22px;
					display: inline-block;
					vertical-align: middle;
					margin: 0;
				}
				.reduce {
					background: url(../img/reduce_press.png) no-repeat;
					background-size: 22px;
					margin-right: 4px;
				}
				.plus {
				    background: url(../img/plus_press.png) no-repeat;
				    background-size: 22px;
				    margin-left: 4px;
				}
			}
		}
	}
}
.sub-btn{
	position: fixed;
	bottom: 0;
	width: 100%;
	border-top: @border;
	padding-left: 10px;
	z-index: 999;
	i{
		width: 30px;
		height: 30px;
		display: inline-block;
		vertical-align: middle;
		margin: 0;
		background: url(../img/cart_icon.png) no-repeat;
		background-size: 30px;
	}
	span{
		width: 16px;
		height: 16px;
		border-radius: 10px;
		background: #ffad39;
		font-size: 12px;
		color: #fff;
		display: inline-block;
		text-align: center;
		line-height: 16px;
		position: absolute;
		left: 30px;
		top: 2px;
	}
	p{
		text-align: right;
		font-size: 10px;
		float: right;
		padding-left: 10px;
		line-height: 40px;
		display: inline-block
	}
}
.fade{
	opacity: 0;
	-webkit-transition: opacity .15s linear;
	-o-transition: opacity .15s linear;
	transition: opacity .15s linear;
}
#single{
	.modal-body{
		padding: 0;
		.modal-pic{
			position: relative;
			height: 260px;
			overflow: hidden;
			background: url(../img/nopic2.png) no-repeat center;
  			background-size: 30%;
			.more-info{
				position: absolute;
				width: 100%;
				margin: 0 auto;
				bottom: 0;
				color: #fff;
				font-size: 10px;
				background: rgba(0,0,0,0.4);
				div{
					line-height: 30px;
				}
				p{
					display: none;
					padding: 10px;
				}
			}
		}
		.food-modal-foot{
			padding: 12px;
			p{
				line-height: 35px;
			    font-size: 12px;
			    color: #f15d52;
			    display: inline-block;
			}
		}
	}
	.modal-header{
		min-height: 16.43px;
		padding: 6px;
		position: absolute;
		top: 0px;
		right: 0;
		z-index: 66666666;
		border: none;
		background-color: rgba(0,0,0,0.6);
		.close {
		  float: right;
		  font-size: 21px;
		  line-height: 1;
		  color: #FFF;
		  opacity: 1;
		}
	}
	img{
		width: 100%;
		height: 100%;
	}
	footer{
		padding: 12px;
		p{
			font-size: 12px;
		}
		p:last-child span{
			font-size:10px;
			color: @main;
		}
	}
}
/*确认订单*/
.order-food{
	margin-top: 10px;
	.of-top{
		border-bottom: @border;
		div{
			padding: 10px;
			p{
				font-size: 12px;
				color: @g9;
				margin-top: 4px;
				span{
					color: @main;
				}
			}
			p:last-child{
				margin-top: 10px;
				font-size: 12px;
			}
		}
	}
	.of-content{
		padding: 10px;
		span{
			vertical-align: top;
		}
		ul{
			display: inline-block;
		}
	}
}
textarea{
	background: #f7f7f7;
}
.pay-food{
	.pay-num{
		padding: 10px;
		p:first-child{
			span{
				color: @g9;
			}
		}
		p:last-child{
			span{
				color: @main;
			}
		}
	}
}
.remain-time{
	font-size: 12px;
	color: @g9;
	text-align: center;
	line-height: 30px;
	i{
		display: inline-block;
		background: url(../img/remain-time.png) no-repeat center;
		background-size: 10px;
	}
}
.com_step h1{
	font-size: 18px;
}
.com_step p {
  line-height: 30px;
  font-size: 14px;
}